<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>首页</title>
  <link rel="stylesheet" href="./bootstrap/bootstrap.min.css" />
  <link rel="stylesheet" href="./bootstrap/bootstrap-icons.css" />
  <link rel="stylesheet" href="./css/common.css" />
  <style>
    .card-stats .bi {
      width: 50px;
      height: 50px;
      display: block;
      background-color: #e4e4e4;
      color: #fff;
      border-radius: 50%;
      line-height: 50px;
      text-align: center;
      font-size: 24px;
      margin-top: 4px;
    }
  </style>
</head>

<body class="application application-offset">
  <div class="container-fluid container-application">
    <div class="sidenav show" id="sidenav-main">
      <!-- Sidenav header -->
      <div class="sidenav-header d-flex align-items-center">
        <a class="navbar-brand" href="./index.html">
          <span class="logo">·ITCAST·</span>
        </a>
      </div>
      <!-- User mini profile -->
      <div class="sidenav-user d-flex flex-column align-items-center justify-content-between text-center">
        <!-- Avatar -->
        <div>
          <a href="#" class="avatar rounded-circle avatar-xl">
            <img alt="Image placeholder" src="https://yanxuan-item.nosdn.127.net/8b27deb1670c53e67c42ca3e1ed6fd12.jpg"
              class="" />
          </a>
          <div class="mt-5">
            <h5 class="mb-0 text-white">黑马前端</h5>
            <span class="d-block text-sm text-white opacity-8 mb-3">数据可视化</span>
            <a href="javascript:;" class="btn btn-sm btn-white btn-icon rounded-pill shadow hover-translate-y-n3">
              <span class="btn-inner--text">学前端来黑马</span>
            </a>
          </div>
        </div>
      </div>
      <!-- Application nav -->
      <div class="nav-application clearfix">
        <a href="./index.html" class="btn btn-square text-sm active">
          <span class="btn-inner--icon d-block"><i class="bi bi-house bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">首页</span>
        </a>
        <a href="./student.html" class="btn btn-square text-sm">
          <span class="btn-inner--icon d-block"><i class="bi bi-people bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">学生</span>
        </a>
        <a href="javascript:;" class="btn btn-square text-sm">
          <span class="btn-inner--icon d-block"><i class="bi bi-columns bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">排版</span>
        </a>
        <a href="javascript:;" class="btn btn-square text-sm">
          <span class="btn-inner--icon d-block"><i class="bi bi-files bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">资料</span>
        </a>
        <a href="javascript:;" class="btn btn-square text-sm">
          <span class="btn-inner--icon d-block"><i class="bi bi-receipt bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">就业</span>
        </a>
        <a href="javascript:;" class="btn btn-square text-sm">
          <span class="btn-inner--icon d-block"><i class="bi bi-gear bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">设置</span>
        </a>
      </div>
      <!-- Misc area -->
      <div class="card bg-gradient-warning">
        <div class="card-body">
          <h5 class="text-white">哈喽, 朋友!</h5>
          <p class="text-white mb-4">为什么不现在开始学习前端，创造一些令人惊叹的东西呢？</p>
          <a href="http://itcast.cn" class="btn btn-sm btn-block btn-white rounded-pill" target="_blank">Get started</a>
        </div>
      </div>
    </div>
    <div class="main-content position-relative">
      <nav class="navbar navbar-main navbar-expand-lg navbar-dark navbar-border" id="navbar-main">
        <div class="container-fluid">
          <!-- Navbar nav -->
          <div class="collapse navbar-collapse navbar-collapse-fade" id="navbar-main-collapse">
            <ul class="navbar-nav align-items-lg-center">
              <!-- Home  -->
              <li class="nav-item">
                <a class="nav-link pl-lg-0" href="./index.html"> 首页 </a>
              </li>
              <li class="nav-item">
                <a class="nav-link pl-lg-0" href="./index.html"> 传智教育 </a>
              </li>
              <li class="nav-item">
                <a class="nav-link pl-lg-0" href="./index.html"> 黑马程序员 </a>
              </li>
              <li class="nav-item">
                <a class="nav-link pl-lg-0" href="./index.html"> 文档 </a>
              </li>
            </ul>
            <!-- Right menu -->
            <ul class="navbar-nav ml-lg-auto align-items-center d-none d-lg-flex">
              <li class="nav-item dropdown dropdown-animate">
                <a class="nav-link pr-lg-0" href=".dropdown-menu" role="button" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false">
                  <div class="media media-pill align-items-center">
                    <span class="avatar rounded-circle">
                      <img alt="Image placeholder"
                        src="https://yanxuan-item.nosdn.127.net/8b27deb1670c53e67c42ca3e1ed6fd12.jpg" />
                    </span>
                    <div class="ml-2 d-none d-lg-block">
                      <span class="mb-0 text-sm font-weight-bold">Admin</span>
                    </div>
                  </div>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link pl-lg-0" id="logout" href="javascript:;"> 退出 </a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <div class="page-content">
        <!-- Page Title -->
        <div class="page-title">
          <div class="row justify-content-between align-items-center">
            <div class="col-md-6 mb-3 mb-md-0">
              <h5 class="h3 font-weight-400 mb-0 text-white">Dashboard</h5>
              <span class="text-sm text-white opacity-8">上海前端 xx 期</span>
            </div>
          </div>
        </div>
        <!-- charts -->
        <div class="row">
          <div class="col-xl-3 col-md-6">
            <div class="card card-stats">
              <div class="card-body">
                <div class="row">
                  <div class="col">
                    <h6 class="text-muted mb-1">就业薪资</h6>
                    <span name="salary" class="h3 font-weight-bold mb-0 ">15500</span>
                  </div>
                  <div class="col-auto">
                    <i class="bi bi-coin"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-md-6">
            <div class="card card-stats">
              <div class="card-body">
                <div class="row">
                  <div class="col">
                    <h6 class="text-muted mb-1">班级人数</h6>
                    <span name="student_count" class="h3 font-weight-bold mb-0 ">80</span>
                  </div>
                  <div class="col-auto">
                    <i class="bi bi-people"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-md-6">
            <div class="card card-stats">
              <div class="card-body">
                <div class="row">
                  <div class="col">
                    <h6 class="text-muted mb-1">平均年龄</h6>
                    <span name="age" class="h3 font-weight-bold mb-0 ">24.40</span>
                  </div>
                  <div class="col-auto">
                    <i class="bi bi-calendar2-week"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-md-6">
            <div class="card card-stats">
              <!-- Card body -->
              <div class="card-body">
                <div class="row">
                  <div class="col">
                    <h6 class="text-muted mb-1">小组个数</h6>
                    <span name="group_count" class="h3 font-weight-bold mb-0 ">8</span>
                  </div>
                  <div class="col-auto">
                    <i class="bi bi-collection"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col col-xl-8">
            <div class="card" id="line" style="height: 400px;"></div>
          </div>
          <div class="col col-xl-4">
            <div class="card" id="salary" style="height: 400px;"></div>
          </div>
          <div class="col col-xl-12">
            <div class="card" style="height: 400px;">
              <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                  <h6 class="mb-0">班级每组薪资</h6>
                  <div id="btns">
                    <button type="button" class="btn btn-xs btn-blue">1</button>
                    <button type="button" class="btn btn-xs ">2</button>
                    <button type="button" class="btn btn-xs ">3</button>
                    <button type="button" class="btn btn-xs ">4</button>
                    <button type="button" class="btn btn-xs ">5</button>
                    <button type="button" class="btn btn-xs ">6</button>
                    <button type="button" class="btn btn-xs ">7</button>
                    <button type="button" class="btn btn-xs ">8</button>
                  </div>
                </div>
              </div>
              <div class="card-body p-0" id="lines"></div>
            </div>
          </div>
          <div class="col col-xl-4">
            <div class="card" id="gender" style="height: 500px;"></div>
          </div>
          <div class="col col-xl-8">
            <div class="card" id="map" style="height: 500px;"></div>
          </div>
        </div>
        <!-- footer -->
        <div class="footer pt-5 pb-4 footer-light" id="footer-main">
          <div class="row text-center text-sm-left align-items-sm-center">
            <div class="col-sm-6">
              <p class="text-sm mb-0">© 2022 <a href="https://itcast.cn" class="h6 text-sm" target="_blank">前端学科</a>.
                All rights reserved.</p>
            </div>
            <div class="col-sm-6 mb-md-0">
              <ul class="nav justify-content-center justify-content-md-end">
                <li class="nav-item">
                  <a class="nav-link" href="#">Support</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Terms</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pr-0" href="#">Privacy</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="./bootstrap/bootstrap.min.js"></script>
  <script src="./lib/axios.js"></script>
  <script src="./lib/echarts.min.js"></script>
  <script src="./js/common.js"></script>
  <script src="./lib/china.js"></script>
  <!-- 公共 -->
  <script>
    // 1.首页的访问控制
    // 如果 进入到了首页，我们需要知道 当前这次请求，是否有真正的用户?
    // 可以根据 一个字段进行判断:token(用户名和密码正确，才能换回服务端给你的token)
    // 我们再登录页面，存储了这个token 需要在 首页 获取本地存储中是否有 token字段
    // 有就停留在首页，没有则跳转回登录页
    const hm_token = localStorage.getItem('token')
    if (hm_token === null) {
      location.href = './login.html'
    }
    // 2. 回显用户名和退出功能
    // 回显用户名
    document.querySelector('.font-weight-bold').innerHTML = localStorage.getItem('username')
    // 退出
    document.querySelector('#logout').addEventListener('click', function () {
      // 点击退出,清除token,并且返回登录页
      // localstorage getitem 获取 setitem 设置 
      localStorage.clear()
      location.href = './login.html'
    });
    // 3.获取首页的数据，以便稍后进行回显数据 
    (async function () {
      const { data: resData } = await axios.get('/dashboard')
      // console.log(tesData);
      const { overview, year, salaryData, groupData, provinceData } = resData
      for (let k in overview) {
        document.querySelector(`[name = ${k}]`).innerHTML = overview[k]

      }
      setYear(year)
      setSalaryData(salaryData)
      setGroup(groupData)
      setData(salaryData)
      setMap(provinceData)
    })()
  </script>
  <!-- 1. 薪资走势 折线图-->
  <script>
    function setYear(yearData) {
      // 实例化
      const myEchart = echarts.init(document.querySelector('#line'))
      // 准备配置项
      const option = {
        // 添加标题
        title: {
          text: '2021全学科薪资走势',
          // 标题文本样式
          textStyle: {
            fontSize: 16 // 文字大小 16px
          },
          // 标题的位置
          top: 15,
          left: 10
        },
        xAxis: {
          // x轴配置
          type: 'category',
          axisLine: { // 线条样式
            lineStyle: {
              color: '#999',
              type: 'dashed'
            }
          },
          // 轴线文本样式
          axisLabel: {
            color: '#999'
          },
          data: yearData.map(item => item.month)
        },
        yAxis: {
          // y 轴配置
          type: 'value',
          // 设置线条样式,变成虚线
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        // 网格组件
        grid: {
          top: '20%' // 设置 距离title的距离
        },
        // 提示组件
        tooltip: {
          show: true, // 显示提示组件
          trigger: 'axis' // 提示组件触发的模式 axis 坐标轴触发
        },
        // 数据配置区域
        series: [
          {
            data: yearData.map(item => item.salary), // 数据
            type: 'line', // 折线图
            smooth: true, // 是否平滑曲线显示。
            symbolSize: 10, // 标记点的大小
            // 设置线条的样式
            lineStyle: {
              width: 6, // 设置线条的宽度
              // 线性渐变，前四个参数分别是 x0, y0, x2, y2,
              // 范围从 0 - 1，相当于在图形包围盒中的百分比
              // 如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#499FEE' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#5D75F0' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            // 形成 折线图面基区域
            areaStyle: {
              /* color:属性就是设置 面基区域的颜色值
              线性渐变，前四个参数分别是 x, y, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比
              如果 globalCoord 为 `true`，则该四个值是绝对的像素位置 */
              color: {
                type: 'linear',
                x: 0, // x 初始值
                y: 0, // y 初始值
                x2: 0, // x结束值*
                y2: 1, // y结束值
                colorStops: [
                  //颜色为: #499FEE
                  // 中间80%为:
                  // 最后100%为:
                  {
                    offset: 0,
                    color: '#499FEE' // 0% 处的颜色
                  },
                  {
                    offset: 0.8,
                    color: 'rgba(255, 255, 255, 0.2)' // 80% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(255, 255, 255, 0)' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false，如果你改成true 上面的 轴中的数字就是像素
              }
            }
          }
        ]
      };
      // 使用配置项
      myEchart.setOption(option)
    }
  </script>
  <!-- 2. 薪资分布 饼图  -->
  <script>
    function setSalaryData(salaryJson) {
      // 实例化
      const myEchart = echarts.init(document.querySelector('#salary'))
      // 准备配置项
      const option = {
        title: {
          text: '班级薪资分布',
          top: 15,
          left: 10,
          textStyle: {
            fontSize: 16
          }
        },
        // 提示框组件。
        tooltip: {
          trigger: 'item' // 提示位置，鼠标悬停在图形区域进行提示
        },
        // 图例组件。
        legend: {
          bottom: '6%', // 图例位置距离下面 6%
          left: 'center' // 水平居中
        },
        color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
        // 数据组件
        series: [
          {
            name: '饼图',
            type: 'pie', // 饼图的配置
            radius: ['50%', '64%'], // 数组的第一项是内半径，第二项是外半径
            center: ['50%', '45%'], // 图标的位置
            // 图形样式。
            itemStyle: {
              borderRadius: 10, //用于指定饼图扇形区块的内外圆角半径，
              // 支持设置固定数值或者相对于扇形区块的半径的百分比值。
              borderColor: '#fff', // 颜色
              borderWidth: 2 //描边线宽
            },
            // 饼图图形上的文本标签
            label: {
              show: false, // 默认不显示
              position: 'center' // 提示文字在中间显示
            },
            // 高亮状态的扇区和标签样式（鼠标悬停状态）
            // emphasis: {
            // 文本标签
            //   label: {
            //     show: true, // 文字提示
            //     fontSize: '16', // 文字大小
            //     fontWeight: 'bold' // 文字粗细
            //   }
            // },
            // 引导线-默认饼图的提示文字与饼图间的连接线
            labelLine: {
              show: false
            },
            data: salaryJson.map(item => ({
              value: item.g_count + item.b_count,
              name: item.label
            }))
          }
        ]
      };
      // 使用配置项
      myEchart.setOption(option)
    }
  </script>
  <!-- 3. 每组薪资 柱状图-->
  <script>
    let dataJson
    function setGroup(groupJson, num = 1) {
      dataJson = groupJson
      // 实例化
      const myEchart = echarts.init(document.querySelector('#lines'))
      // 准备配置项
      const option = {
        // 图标区域位置
        grid: {
          left: 70,
          top: 30,
          right: 30,
          bottom: 50
        },
        // 提示框组件
        tooltip: {
          trigger: 'item'
        },
        // x轴组件
        xAxis: {
          type: 'category',
          data: groupJson[num].map(item => item.name),
          // 轴线组件
          axisLine: {
            // 轴线样式
            lineStyle: {
              color: '#ccc',
              type: 'dashed'
            }
          },
          // 轴刻度文字样式
          axisLabel: {
            color: '#999'
          }
        },
        // y轴组件
        yAxis: {
          type: 'value',
          // 分割线组件
          splitLine: {
            // 分割线样式
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        // 数据项组件
        series: [
          {
            data: groupJson[num].map(item => item.hope_salary),
            type: 'bar',
            name: '期望薪资'
          },
          {
            data: groupJson[num].map(item => item.salary),
            type: 'bar',
            name: '就业薪资'
          }
        ],
        // 柱图颜色列表
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#34D39A' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(52,211,154,0.2)' // 100% 处的颜色
              }
            ]
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#499FEE' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(73,159,238,0.2)' // 100% 处的颜色
              }
            ]
          }
        ]
      };
      // 使用配置项
      myEchart.setOption(option)

      // // 分组切换
      // const btns = document.querySelector('#btns')
      // btns.addEventListener('click', function (e) {
      //   if (e.target.tagName === 'BUTTON') {
      //     // console.log(e.target);
      //     document.querySelector('.btn-blue').classList.remove('btn-blue')
      //     e.target.classList.add('btn-blue')

      //     const num = e.target.innerHTML
      //     option.xAxis.data = groupJson[num].map(item => item.name)
      //     option.series[0].data = groupJson[num].map(item => item.hope_salary)
      //     option.series[1].data = groupJson[num].map(item => item.salary)
      //     // 使用配置项
      //     myEchart.setOption(option)
      //   }
      // })
    }

    // 分组切换
    const btns = document.querySelector('#btns')
    btns.addEventListener('click', function (e) {
      if (e.target.tagName === 'BUTTON') {
        // console.log(e.target);
        document.querySelector('.btn-blue').classList.remove('btn-blue')
        e.target.classList.add('btn-blue')

        const index = e.target.innerHTML
        setGroup(dataJson, index)
      }
    })
  </script>
  <!-- 4. 男女薪资分布 -->
  <script>
    function setData(salaryJson) {
      // 实例化
      const myEchart = echarts.init(document.querySelector('#gender'))
      // 准备配置项
      const option = {
        title: [
          {
            text: '男女薪资分布',
            left: 10,
            top: 10,
            textStyle: {
              fontSize: 16,
            },
          },
          {
            text: '男生',
            left: '50%',
            top: '45%',
            textAlign: 'center',
            textStyle: {
              fontSize: 12,
            },
          },
          {
            text: '女生',
            left: '50%',
            top: '85%',
            textAlign: 'center',
            textStyle: {
              fontSize: 12,
            },
          },
        ],
        // 提示框组件。
        tooltip: {
          trigger: 'item' // 提示位置，鼠标悬停在图形区域进行提示
        },
        // 颜色组件
        color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
        // 数据组件
        series: [
          {
            type: 'pie', // 饼图的配置
            radius: ['20%', '30%'], // 数组的第一项是内半径，第二项是外半径
            center: ['50%', '30%'], // 图标的位置
            datasetIndex: 1,
            data: salaryJson.map(item => ({
              value: item.b_count,
              name: item.label
            }))
          },
          // 不要使用同一个对象，这个参数不一样的
          // center: ['50%', '70%'], // 俩位置
          // OK？OK
          // center: ['50%', '30%'], // 图标的位置
          {
            type: 'pie',
            radius: 50,
            radius: ['20%', '30%'],
            center: ['50%', '70%'],
            datasetIndex: 2,
            data: salaryJson.map(item => ({
              value: item.g_count,
              name: item.label
            }))
          }
        ]
      };
      // 使用配置项
      myEchart.setOption(option)
    }
  </script>
  <!-- 5. 全国分布 -->
  <script>
    function setMap(provinceJson) {
      // 实例化
      const myEchart = echarts.init(document.querySelector('#map'))
      // 准备配置项
      const dataList = [
            { name: '南海诸岛', value: 0 },
            { name: '北京', value: 0 },
            { name: '天津', value: 0 },
            { name: '上海', value: 0 },
            { name: '重庆', value: 0 },
            { name: '河北', value: 0 },
            { name: '河南', value: 0 },
            { name: '云南', value: 0 },
            { name: '辽宁', value: 0 },
            { name: '黑龙江', value: 0 },
            { name: '湖南', value: 0 },
            { name: '安徽', value: 0 },
            { name: '山东', value: 0 },
            { name: '新疆', value: 0 },
            { name: '江苏', value: 0 },
            { name: '浙江', value: 0 },
            { name: '江西', value: 0 },
            { name: '湖北', value: 0 },
            { name: '广西', value: 0 },
            { name: '甘肃', value: 0 },
            { name: '山西', value: 0 },
            { name: '内蒙古', value: 0 },
            { name: '陕西', value: 0 },
            { name: '吉林', value: 0 },
            { name: '福建', value: 0 },
            { name: '贵州', value: 0 },
            { name: '广东', value: 0 },
            { name: '青海', value: 0 },
            { name: '西藏', value: 0 },
            { name: '四川', value: 0 },
            { name: '宁夏', value: 0 },
            { name: '海南', value: 0 },
            { name: '台湾', value: 0 },
            { name: '香港', value: 0 },
            { name: '澳门', value: 0 },
          ]
          // 哈哈，你这注释了啊

        // 数据设置
        dataList.forEach((item) => {
          // 把每个城市对象遍历过来, 去数组data里循环数据的value, 然后设置
          // 到dataList的对象中, 应用到图表里
          // 数据里名字和上面的名字有点不太一样, 需要把多余的文字去掉(替换成
          // 空字符串)
          const obj = provinceJson.find((it) => {
            
            return it.name.replace(/省|回族自治区|吾尔自治区|壮族自治区|特别行政区|自治区/g, '') === item.name
          })
          if (obj) item.value = obj.value
        })

      let option = {
        title: {
          text: '籍贯分布',
          top: 10,
          left: 10,
          textStyle: {
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} 位学员',
          borderColor: 'transparent',
          backgroundColor: 'rgba(0,0,0,0.5)',
          textStyle: {
            color: '#fff',
          },
        },
        visualMap: {
          min: 0,
          max: 6,
          left: 'left',
          bottom: '20',
          text: ['6', '0'],
          inRange: {
            color: ['#ffffff', '#0075F0'],
          },
          show: true,
          left: 40,
        },
        geo: { // 地理坐标系组件
          map: 'china',
          roam: false,
          zoom: 1.0,
          label: {
            normal: {
              show: true,
              fontSize: '10',
              color: 'rgba(0,0,0,0.7)',
            },
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(0, 0, 0, 0.2)',
              color: '#e0ffff',
            },
            emphasis: {
              areaColor: '#34D39A',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
        series: [
          {
            name: '籍贯分布',
            type: 'map',
            geoIndex: 0,
            data: dataList,
          },
        ],
      }
      // 使用配置项
      myEchart.setOption(option)
    }
  </script>
</body>

</html>